<script setup lang="ts">
import { ref, watch } from 'vue'
import { MdPreview, MdCatalog } from 'md-editor-v3'
import 'md-editor-v3/lib/preview.css'
import { formContextKey } from 'element-plus';
import application from '../../../public/md/application.md?raw'
import androidpush from '../../../public/md/androidpush.md?raw'
import dedication from '../../../public/md/dedication.md?raw'

const props = withDefaults(
  defineProps<{
    mdurl: string
  }>(),
  {
    mdurl: ''
  }
)
const id = 'preview-only'
const text = ref<string>('')
const scrollElement = ref<HTMLElement>()

text.value = application
watch(props, () => {
  switch (props.mdurl) {
    case 'application':
      text.value = application
      break;
    case 'androidpush':
      text.value = androidpush
      break;
    case 'dedication':
      text.value = dedication
      break;
    default:
      text.value = application
      break;
  }
})
</script>

<template>
  <div class="mdpreview">
    <MdPreview :editorId="id" :modelValue="text" ref="scrollElement" />
    <MdCatalog :editorId="id" :scrollElement="scrollElement" style="padding: 10px 0; color: #333; font-weight: 500" />
  </div>
</template>

<style scoped>
.mdpreview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  overflow-y: scroll;
}

:deep(.md-editor-catalog-active > span) {
  color: #187EE6;
}

:deep(.md-editor-catalog-link span) {
  font-size: 14px;
  font-weight: 500px;
}

:deep(.md-editor-catalog-link span:hover) {
  color: #187EE6;
}
</style>
